<template>
  <base-layout>
    <template #searchPanel>
      <search-panel
        v-slot="{ form }"
        :selectPer="'111'"
        :excelPer="'newCarOrder:export'"
        @search="search"
        @handleDataExport="handleDataExport"
        :showSearchButton="true"
        :showExportButton="true"
        @export="excelInfo"
      >
        <CarModel
          style='width: 400px'
          v-model='modelList'
          ref='carModel'
          placeholder='车型组件'
        />       
        <job-shop style="width: 150px;" v-model="form.storeId" placeholder="销售门店" />
        <el-select
          clearable
          style="width: 150px"
          v-model="form.saleId"
          placeholder="销售顾问"
        >
          <el-option
            v-for="item in dataArry"
            :key="item.index"
            :value="item.id"
            :label="item.userName"
          />
        </el-select>
        <el-select
          clearable
          style="width: 150px"
          v-model="form.carBrandId"
          placeholder="订单类别"
        >
          <el-option
            v-for="item in getDict['品牌']"
            :key="item.index"
            :value="item.value"
            :label="item.text"
          />
        </el-select>
        <el-input
          v-model="form.client"
          clearable
          placeholder="客户名称/手机号"
          style="width: 150px"
        />
      </search-panel>
    </template>
    <template #contentPanel>
      <data-table
        :value="tableData"
        :total-count="totalCount"
        :has-action="true"
        :table-column-attributes="tableColumnAttributes"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :width="160"
      >
        <template #action="{ row }">
          <i
            class="el-icon-edit cursor"
            title="修改"
            v-permission="'procurement:edit'"
            @click="updateUser(row)"
          ></i>
          <i title="开票" v-permission="'procurement:issue'" class="el-icon-s-order cursor" @click="invoice(row)"></i>
          <i title="详情" v-permission="'procurement:detail'" @click="viewDetail(row)" class="el-icon-view cursor"></i>
          <i title="作废" v-permission="'procurement:detail'" v-if="row.status == 2" @click="invalid(row)" class="el-icon-delete-solid cursor"></i>
        </template>
      </data-table>
    </template>
  </base-layout>
</template>
<script>
import baseMixin from '@/mixins/base'
import {
  getList,
} from '@/api/pre-sale/orderManagement/newCar'
import { getDict, exportExcel } from '@/utils/index'
import { CarModel } from '@/components/index'
import { getStoreUser } from '@/api/after-sale/personnel/index'
export default {
  components: {
    CarModel,
  },
  mixins: [
    baseMixin({
      idName: 'id',
      findData: getList,
      dataName: ['content', 'totalRecords']
    })
  ],
  data() {
    return {
      getInvoiceId: null,
      modelList: [],
      dataArry: [],
      getDict: getDict,
      form: {
        storeId: '',
        client: '' // 客户信息
      },
      tableColumnAttributes: [
        { name: '采购单号', value: 'carOrderNo', type: 'text' },
        { name: '采购类型', value: 'storeName', type: 'text' },
        { name: '发票号码', value: 'carBrandName', type: 'text' },
        { name: '发票金额', value: 'carModelName', type: 'text' },
        { name: '税率', value: 'vin', type: 'text' },
        { name: '发票类型', value: 'clientName', type: 'text' },
        { name: '明细编码', value: 'clientPhone', type: 'text' },
        { name: '开票对象', value: 'businessNo', type: 'text' },
        { name: '发票日期', value: 'insuranceNo', type: 'text' },
        { name: '发票状态', value: 'insureTime', type: 'text' },
        { name: '单据状态', value: 'headOffice', type: 'text' },
        { name: '登记机构', value: 'branchOffice', type: 'text' },
        { name: '登记时间', value: 'guaranteeSlipType', type: 'text' },
      ],
      dict: {}
    }
  },
  methods: {
    invoice(row){
      this.getInvoiceId = row.id;
    },
    // 编辑员工信息
    updateUser(row) {
      const { id } = row
      this.$router.push({
        path: '/personnel/updataEmployee',
        query: {
          userId: id
        }
      })
    },
    //查看详情
    viewDetail(row) {
      const { id } = row
      this.$router.push({
        path: '/orderManagement/carDeatail',
        query: {
          id: id
        }
      })
    },
    //查看销售单详情
    viewSalesDetail(row) {
      const { id } = row
      this.$router.push({
        path: '/orderManagement/salesList',
        query: {
          id: id
        }
      })
    },
    // 查询
    search(form) {
      this.searchOptions = form
      this.currentPage = 1
      this.setTableData()
    },
    add() {
      this.$router.push({
        name: 'adddepositOrder',
        params: { type: 'add' }
      })
    },
    handleDataExport() {

    },
    //导出
    excelInfo () {
      exportExcel("NewCarOrder", "新车订单(整合)", {}, this.pageSize, this.currentPage);
    },
  },
  async mounted() {
    await getStoreUser().then((res) => {
      const { success, data } = res
      if (success) this.dataArry = data
    })
  }
}
</script>
<style scoped>
  .cursor {
    margin-left: 15px;
    cursor: pointer
  }
</style>
